<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="同城帮买" name="first">
        <div style="display: inline-block; margin: 3px;">
          <span>状态：</span>
          <el-select v-model="indentState" style="width:150px;margin-left: 10px;" @change="select(indentState)">
            <el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>收货人手机号：</span>
          <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入手机号" v-model="phone">
          </el-input>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>骑手电话：</span>
          <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入骑手电话" v-model="riderPhone">
          </el-input>&nbsp;&nbsp;
        </div>
        <div style="display: inline-block; margin: 3px;">
          <el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
            <el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>&nbsp;&nbsp;&nbsp;
        </div>
        <div style="display: inline-block; margin: 3px;">
          <el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right" type="datetime"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间" @change="animeOrder">
          </el-date-picker>
        </div>
        <div style="display: inline-block; margin: 3px;">
          <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询
          </el-button>
          <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置
          </el-button>
          <!-- <el-button style='margin:0 0 20px 20px;' v-if="isAuth('autonym:pass')" size="mini" type="primary"
						icon="document" @click="passClick()" :disabled="checkBoxData.length <= 0">通过</el-button> -->
        </div>
        <el-table v-loading="tableDataLoading" :data="homeData.list">
          <el-table-column fixed prop="indentId" label="编号" width="80">
            <!-- <template slot-scope="scope">
              <div>{{scope.$index+1}}</div>
            </template> -->
          </el-table-column>
          <el-table-column prop="nickName" label="发布人昵称" width="120">
            <template slot-scope="scope">
              <div style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row.userId)">{{scope.row.nickName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="productDetails" label="帮买物品" width="150">
          </el-table-column>
          <el-table-column prop="shopAddressDetail" label="指定地址" width="200">
          	<!-- <template slot-scope="scope">
          		<div v-if="scope.row.shopAddressDetail">{{scope.row.shipAddressDetail}}({{scope.row.shipAddress}})</div>
          		<div v-else>就近购买</div>
          	</template> -->
          </el-table-column>
          <el-table-column prop="deilveryAddressDetail" label="收货地址" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.userAddressDetail">
                {{scope.row.userProvince}}{{scope.row.userCity}}{{scope.row.userDistrict}}({{scope.row.userAddressDetail}})
              </div>
              <div>联系人：{{scope.row.userName}} {{scope.row.userPhone}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="riderNickName" label="骑手昵称" width="120">
            <template slot-scope="scope">
              <div style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row.riderUserId)">{{scope.row.riderNickName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="riderPhone" label="骑手电话" width="200"></el-table-column>
          <el-table-column prop="buyType" label="购买时间">
          </el-table-column>
          <el-table-column prop="prepayMoney" label="预估商品费用">
          </el-table-column>
          <el-table-column prop="redPacketAmount" label="红包">
          </el-table-column>
          <el-table-column prop="tip" label="小费">
          </el-table-column>
          <el-table-column prop="errandMoney" label="跑腿费">
          </el-table-column>

          <el-table-column prop="platformMoney" label="平台收入">
          </el-table-column>
          <el-table-column prop="riderMoney" label="骑手/师傅收入">
          </el-table-column>
          <el-table-column prop="indentBasicsMoney" label="订单基础价格">
          </el-table-column>
          <el-table-column prop="riderFine" label="骑手取消订单罚金">
          </el-table-column>
          <!-- <el-table-column prop="userFine" label="用户取消订单罚金">
          </el-table-column> -->
          <el-table-column prop="cargoInsurance" label="保价费">
          </el-table-column>
          <el-table-column prop="cargoInsuranceFlag" label="是否保价">
          	<template slot-scope="scope">
          		<div v-if="scope.row.cargoInsuranceFlag==1">否</div>
          		<div v-if="scope.row.cargoInsuranceFlag==0">是</div>
          	</template>
          </el-table-column>
          <el-table-column prop="indentMoney" label="总费用">
          </el-table-column>
          <el-table-column prop="itemCode" label="收货码">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="200">
          </el-table-column>
          <el-table-column prop="riderlng" label="完成时骑手经度">
          </el-table-column>
          <el-table-column prop="riderlat" label="完成时骑手纬度度">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160">
          </el-table-column>
          <el-table-column prop="state" label="状态" fixed="right">
            <template slot-scope="scope">
              <div v-if="scope.row.indentState=='0'">未支付</div>
              <div v-if="scope.row.indentState=='1'">未支付</div>
              <div v-if="scope.row.indentState=='2'">待接单</div>
              <div v-if="scope.row.indentState=='3'">已接单</div>
              <div v-if="scope.row.indentState=='4'">已取货/购买</div>
              <!-- <div v-if="scope.row.indentState=='5'">已送达</div> -->
              <div v-if="scope.row.indentState=='6'">订单已完成</div>
              <!-- <div v-if="scope.row.indentState=='7'">已完成</div> -->
              <div v-if="scope.row.indentState=='8'">用户取消订单</div>
              <div v-if="scope.row.indentState=='9'">骑手取消订单</div>
              <div v-if="scope.row.indentState=='10'">已下架</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="info" v-if="Number(scope.row.indentState)<6&&Number(scope.row.indentState)>2"
                :disabled="!isAuth('missionRun:update')" @click="compileQx(scope.$index, scope.row)">取消
              </el-button>
              <el-button size="mini" type="primary" v-if="Number(scope.row.indentState)<3"
                :disabled="!isAuth('missionRun:update')" @click="compile(scope.$index, scope.row)">下架
              </el-button>

            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
            :page-sizes="[10, 20, 30, 40]" :page-size="size" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="homeData.totalCount">
          </el-pagination>
        </div>

      </el-tab-pane>
      <el-tab-pane label="同城服务" name="second">
        <div style="display: inline-block; margin: 3px;">
          <span>状态：</span>
          <el-select v-model="indentState" style="width:150px;margin-left: 10px;" @change="select(indentState)">
            <el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>下单人手机号：</span>
          <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入手机号" v-model="phone">
          </el-input>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>骑手电话：</span>
          <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入骑手电话" v-model="riderPhone">
          </el-input>&nbsp;&nbsp;
        </div>
        <div style="display: inline-block; margin: 3px;">
          <el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
            <el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>&nbsp;&nbsp;&nbsp;
        </div>
        <div style="display: inline-block; margin: 3px;">
          <el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right" type="datetime"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间" @change="animeOrder">
          </el-date-picker>
        </div>
        <div style="display: inline-block; margin: 3px;">
          <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询
          </el-button>
          <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置
          </el-button>
          <!-- <el-button style='margin:0 0 20px 20px;' v-if="isAuth('autonym:pass')" size="mini" type="primary"
						icon="document" @click="passClick()" :disabled="checkBoxData.length <= 0">通过</el-button> -->
        </div>
        <el-table v-loading="tableDataLoading" :data="homeData.list">
          <el-table-column fixed prop="indentId" label="编号" width="50">
           <!-- <template slot-scope="scope">
              <div>{{scope.$index+1}}</div>
            </template> -->
          </el-table-column>
          <el-table-column prop="nickName" label="发布人昵称" width="120">
            <template slot-scope="scope">
              <div style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row.userId)">{{scope.row.nickName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="serviceDetails" label="物品/服务详情" width="200">
          	<template slot-scope="scope">
          		<div v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">{{scope.row.itemWeight}}; {{scope.row.itemValue}}; {{scope.row.productDetails}};</div>
          		<div v-if="scope.row.indentType=='4'">{{scope.row.serviceDetails}}</div>
          	</template>
          </el-table-column>
          <el-table-column prop="serviceType" label="服务类型"></el-table-column>
          <!-- <el-table-column prop="tool" label="是否自备配件" width="150"></el-table-column> -->
          <!-- <el-table-column prop="remarks" label="备注"  width="200"></el-table-column> -->
          <el-table-column prop="deilveryAddressDetail" label="服务地址" width="200">
            <template slot-scope="scope">
              <div>{{scope.row.userProvince}}{{scope.row.userCity}}{{scope.row.userDistrict}}({{scope.row.userAddressDetail}})</div>
              <div>联系人：{{scope.row.userName}} {{scope.row.userPhone}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="riderNickName" label="骑手昵称" width="120">
            <template slot-scope="scope">
              <div style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row.riderUserId)">{{scope.row.riderNickName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="riderPhone" label="骑手电话" width="200"></el-table-column>
          <el-table-column prop="sendOutTime" label="上门时间" width="150"></el-table-column>
          <el-table-column prop="prepayMoney" label="预估商品费用">
          </el-table-column>
          <el-table-column prop="redPacketAmount" label="红包">
          </el-table-column>
          <el-table-column prop="tip" label="小费">
          </el-table-column>
          <el-table-column prop="errandMoney" label="跑腿费">
          </el-table-column>

          <el-table-column prop="platformMoney" label="平台收入">
          </el-table-column>
          <el-table-column prop="riderMoney" label="骑手/师傅收入">
          </el-table-column>
          <el-table-column prop="indentBasicsMoney" label="订单基础价格">
          </el-table-column>
          <el-table-column prop="riderFine" label="骑手取消订单罚金">
          </el-table-column>
          <!-- <el-table-column prop="userFine" label="用户取消订单罚金">
          </el-table-column> -->
          <el-table-column prop="cargoInsurance" label="保价费">
          </el-table-column>
          <el-table-column prop="cargoInsuranceFlag" label="是否保价">
          	<template slot-scope="scope">
          		<div v-if="scope.row.cargoInsuranceFlag==1">否</div>
          		<div v-if="scope.row.cargoInsuranceFlag==0">是</div>
          	</template>
          </el-table-column>
          <el-table-column prop="indentMoney" label="总费用">
          </el-table-column>
          <el-table-column prop="itemCode" label="收货码">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="200">
          </el-table-column>
          <el-table-column prop="riderlng" label="完成时骑手经度">
          </el-table-column>
          <el-table-column prop="riderlat" label="完成时骑手纬度度">
          </el-table-column>
          <!-- <el-table-column prop="warrantyPeriod" label="保修期"></el-table-column> -->
          <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
          <el-table-column prop="state" label="状态" fixed="right">
            <template slot-scope="scope">
              <div v-if="scope.row.indentState=='0'">未支付</div>
              <div v-if="scope.row.indentState=='1'">未支付</div>
              <div v-if="scope.row.indentState=='2'">已支付</div>
              <div v-if="scope.row.indentState=='3'">已接单</div>
              <div v-if="scope.row.indentState=='4'">已取货/购买</div>
              <!-- <div v-if="scope.row.indentState=='5'">已送达</div> -->
              <div v-if="scope.row.indentState=='6'">订单已完成</div>
              <!-- <div v-if="scope.row.indentState=='7'">已完成</div> -->
              <div v-if="scope.row.indentState=='8'">用户取消订单</div>
              <div v-if="scope.row.indentState=='9'">骑手取消订单</div>
              <div v-if="scope.row.indentState=='10'">已下架</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="info" v-if="Number(scope.row.indentState)<6&&Number(scope.row.indentState)>2"
                :disabled="!isAuth('missionRun:update')" @click="compileQx(scope.$index, scope.row)">取消
              </el-button>
              <el-button size="mini" type="primary" v-if="Number(scope.row.indentState)<3"
                :disabled="!isAuth('missionRun:update')" @click="compile(scope.$index, scope.row)">下架
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;float:right">
          <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
            :page-sizes="[10, 15, 20]" :page-size="limit" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="homeData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="送取任务" name="third">
        <div style="display: inline-block;">
          <span>任务类型：</span>
          <el-select v-model="indentType" style="width:150px;margin-left: 10px;" @change="animeDat2(indentType)">
            <el-option v-for="item in homeData1" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
          </el-select>&nbsp;&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>状态：</span>
          <el-select v-model="indentState" style="width:150px;margin-left: 10px;" @change="select(indentState)">
            <el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>收货人手机号:</span>
          <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入手机号" v-model="phone">
          </el-input>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>骑手电话：</span>
          <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入骑手电话" v-model="riderPhone">
          </el-input>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
            <el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>&nbsp;&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right" type="datetime"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间" @change="animeOrder">
          </el-date-picker>
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="select">查询
          </el-button>
          <el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="cleans">重置
          </el-button>&nbsp;&nbsp;
        </div>
        <el-table v-loading="tableDataLoading" :data="homeData.list">
          <el-table-column fixed prop="indentId" label="编号" width="80">
           <!-- <template slot-scope="scope">
              <div>{{scope.$index+1}}</div>
            </template> -->
          </el-table-column>
          <el-table-column prop="nickName" label="发布人昵称" width="120">
            <template slot-scope="scope">
              <div style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row.userId)">{{scope.row.nickName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="itemType" label="送/取物品" width="150">
          </el-table-column>
          <el-table-column prop="serviceDetails" label="物品/服务详情" width="200">
          	<template slot-scope="scope">
          		<div v-if="scope.row.indentType=='1'||scope.row.indentType=='2'">{{scope.row.itemWeight}}; {{scope.row.itemValue}};</div>
          		<div v-if="scope.row.indentType=='4'">{{scope.row.serviceDetails}}</div>
          	</template>
          </el-table-column>
          <el-table-column prop="shopAddressDetail" label="取货地址" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.shopAddressDetail">
                {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}({{scope.row.shopAddressDetail}})
              </div>
              <div>联系人：{{scope.row.shopName}} {{scope.row.shopPhone}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="userAddressDetail" label="收货地址" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.userAddressDetail">
                {{scope.row.userProvince}}{{scope.row.userCity}}{{scope.row.userDistrict}}({{scope.row.userAddressDetail}})
              </div>
              <div>联系人：{{scope.row.userName}} {{scope.row.userPhone}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="riderNickName" label="骑手昵称" width="120">
            <template slot-scope="scope">
              <div style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row.riderUserId)">{{scope.row.riderNickName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="riderPhone" label="骑手电话" width="200"></el-table-column>
          <el-table-column prop="sendOutTime" label="送货/取件时间"></el-table-column>

          <el-table-column prop="distance" label="距离"></el-table-column>
          <el-table-column prop="prepayMoney" label="预估商品费用">
          </el-table-column>
          <el-table-column prop="redPacketAmount" label="红包">
          </el-table-column>
          <el-table-column prop="tip" label="小费">
          </el-table-column>
          <el-table-column prop="errandMoney" label="跑腿费">
          </el-table-column>

          <el-table-column prop="platformMoney" label="平台收入">
          </el-table-column>
          <el-table-column prop="riderMoney" label="骑手/师傅收入">
          </el-table-column>
          <el-table-column prop="indentBasicsMoney" label="订单基础价格">
          </el-table-column>
          <el-table-column prop="riderFine" label="骑手取消订单罚金">
          </el-table-column>
         <!-- <el-table-column prop="userFine" label="用户取消订单罚金">
          </el-table-column> -->
          <el-table-column prop="cargoInsurance" label="保价费">
          </el-table-column>
          <el-table-column prop="cargoInsuranceFlag" label="是否保价">
          	<template slot-scope="scope">
          		<div v-if="scope.row.cargoInsuranceFlag==1">否</div>
          		<div v-if="scope.row.cargoInsuranceFlag==0">是</div>
          	</template>
          </el-table-column>
          <el-table-column prop="indentMoney" label="总费用">
          </el-table-column>
          <el-table-column prop="itemCode" label="收货码">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="200">
          </el-table-column>
          <el-table-column prop="riderlng" label="完成时骑手经度">
          </el-table-column>
          <el-table-column prop="riderlat" label="完成时骑手纬度度">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160">
          </el-table-column>
          <el-table-column prop="state" label="状态" fixed="right">
            <template slot-scope="scope">
              <div v-if="scope.row.indentState=='0'">未支付</div>
              <div v-if="scope.row.indentState=='1'">未支付</div>
              <div v-if="scope.row.indentState=='2'">已支付</div>
              <div v-if="scope.row.indentState=='3'">已接单</div>
              <div v-if="scope.row.indentState=='4'">已取货/购买</div>
              <!-- <div v-if="scope.row.indentState=='5'">已送达</div> -->
              <div v-if="scope.row.indentState=='6'">订单已完成</div>
              <!-- <div v-if="scope.row.indentState=='7'">已完成</div> -->
              <div v-if="scope.row.indentState=='8'">用户取消订单</div>
              <div v-if="scope.row.indentState=='9'">骑手取消订单</div>
              <div v-if="scope.row.indentState=='10'">已下架</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="id" width="80" fixed='right' align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="info" v-if="Number(scope.row.indentState)<6&&Number(scope.row.indentState)>2"
                :disabled="!isAuth('missionRun:update')" @click="compileQx(scope.$index, scope.row)">取消
              </el-button>
              <el-button size="mini" type="primary" v-if="Number(scope.row.indentState)<3"
                :disabled="!isAuth('missionRun:update')" @click="compile(scope.$index, scope.row)">下架
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;float:right">
          <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
            :page-sizes="[10, 20, 30, 40]" :page-size="size" :current-page="page"
            layout="total,sizes, prev, pager, next,jumper" :total="homeData.totalCount">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="外卖任务" name="waimai">
        <div style="display: inline-block;">
          <span>状态：</span>
          <el-select v-model="indentState" style="width:150px;margin-left: 10px;" @change="select(indentState)">
            <el-option v-for="item in statesnum1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>下单人手机号：</span>
          <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入手机号" v-model="phone">
          </el-input>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block; margin: 3px;">
          <span>骑手电话：</span>
          <el-input style="width: 200px;" @keydown.enter.native="select" placeholder="请输入骑手电话" v-model="riderPhone">
          </el-input>&nbsp;&nbsp;
        </div>
  <div style="position: relative;display: inline-block; margin: 3px;">
    <el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
      <el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>&nbsp;&nbsp;&nbsp;
  </div>
  <div style="position: relative;display: inline-block; margin: 3px;">
    <el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right" type="datetime"
      format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间" @change="animeOrder">
    </el-date-picker>
  </div>
  <div style="position: relative;display: inline-block; margin: 3px;">
    <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="select">查询
    </el-button>
    <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="cleans">重置
    </el-button>
    <!-- <el-button style='margin:0 0 20px 20px;' v-if="isAuth('autonym:pass')" size="mini" type="primary"
      			icon="document" @click="passClick()" :disabled="checkBoxData.length <= 0">通过</el-button> -->
  </div>
  <el-table v-loading="tableDataLoading" :data="homeData.list">
    <el-table-column fixed prop="indentId" label="编号" width="80">
    </el-table-column>
    <el-table-column prop="shopName" label="商铺名称" width="120">
      <template slot-scope="scope">
        <div style="color: #4f9dec;cursor: pointer;">{{scope.row.shopName}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="shopPhone" label="商铺电话" width="200"></el-table-column>
    <el-table-column prop="deilveryAddressDetail" label="商铺地址" width="200">
      <template slot-scope="scope">
        <div>
          {{scope.row.shopProvince}}{{scope.row.shopCity}}{{scope.row.shopDistrict}}{{scope.row.shopAddressDetail}}
        </div>
      </template>
    </el-table-column>
   <!-- <el-table-column prop="serviceDetails" label="服务详情" width="200"></el-table-column>
    <el-table-column prop="serviceType" label="服务类型"></el-table-column> -->
    <el-table-column prop="indentNumber" label="订单编号" width="150"></el-table-column>
    <!-- <el-table-column prop="remarks" label="备注"  width="200"></el-table-column> -->
    <el-table-column prop="userName" label="收货人名称" width="120">
      <template slot-scope="scope">
        <div style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row.userId)">{{scope.row.userName}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="userPhone" label="收货人电话" width="200"></el-table-column>
    <el-table-column prop="deilveryAddressDetail" label="收货地址" width="200">
      <template slot-scope="scope">
        <div>
          {{scope.row.userProvince}}{{scope.row.userCity}}{{scope.row.userDistrict}}{{scope.row.userAddressDetail}}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="riderNickName" label="骑手昵称" width="120">
      <template slot-scope="scope">
        <div style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row.riderUserId)">{{scope.row.riderNickName}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="riderPhone" label="骑手电话" width="200"></el-table-column>
    <el-table-column prop="errandMoney" label="跑腿费">
    </el-table-column>
    <el-table-column prop="platformMoney" label="平台收入">
    </el-table-column>
    <el-table-column prop="riderMoney" label="骑手总收入">
    </el-table-column>
    <!-- <el-table-column prop="warrantyPeriod" label="保修期"></el-table-column> -->
    <el-table-column prop="createTime" label="下单时间" width="160"></el-table-column>
    <el-table-column prop="state" label="状态" fixed="right">
      <template slot-scope="scope">
        <div v-if="scope.row.indentState=='0'">未支付</div>
        <div v-if="scope.row.indentState=='1'">未支付</div>
        <div v-if="scope.row.indentState=='2'">待接单</div>
        <div v-if="scope.row.indentState=='3'">已接单</div>
        <div v-if="scope.row.indentState=='4'">已取货</div>
        <!-- <div v-if="scope.row.indentState=='5'">已送达</div> -->
        <div v-if="scope.row.indentState=='6'">已完成</div>
        <!-- <div v-if="scope.row.indentState=='7'">已完成</div> -->
        <div v-if="scope.row.indentState=='8'">用户已取消</div>
        <div v-if="scope.row.indentState=='9'">骑手已取消</div>
        <div v-if="scope.row.indentState=='10'">已下架</div>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="80" fixed="right">
      <template slot-scope="scope">
        <el-button size="mini" type="info" v-if="Number(scope.row.indentState)<6&&Number(scope.row.indentState)>2"
          :disabled="!isAuth('missionRun:update')" @click="compileQx(scope.$index, scope.row)">取消
        </el-button>
        <el-button size="mini" type="primary" v-if="Number(scope.row.indentState)<3"
          :disabled="!isAuth('missionRun:update')" @click="compile(scope.$index, scope.row)">下架
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="text-align: center;margin-top: 10px;float:right">
    <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :page-sizes="[10, 15, 20]"
      :page-size="limit" :current-page="page" layout="total,sizes, prev, pager, next,jumper"
      :total="homeData.totalCount">
    </el-pagination>
  </div>
  </el-tab-pane>
  <!-- 任务审核弹框 -->
  <el-dialog title="任务审核" :visible.sync="dialogFormVisible8" center>
    <el-radio-group v-model="radio" style="width: 100%;margin-bottom: 30px;margin-left: 200px;">
      <el-radio :label="1">通过</el-radio>
      <el-radio :label="2">驳回</el-radio>
    </el-radio-group>
    <div style="margin-bottom: 10px;">
      <span style="width: 200px;display: inline-block;text-align: right;">驳回理由：</span>
      <el-input style="width:50%;" v-model="contents" type="text" placeholder="请输入驳回理由"></el-input>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible8 = false">取 消</el-button>
      <el-button type="primary" @click="refuseto()">确 定</el-button>
    </div>
  </el-dialog>
  </el-tabs>
  </div>
</template>

<script>
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import quillConfig from './quill-config.js'
  import axios from 'axios';
  import {
    jsonp
  } from 'vue-jsonp'
  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'
  var cityOptions = []
  var geocoder, map, markersArray = [];
  export default {
    components: {
      quillEditor
    },
    data() {
      return {
        dialogWidth: 0,
        size: 10,
        page: 1,
        state: '',
        limit: 10,
        classify: 6,
        classifys: 6,
        openValue: 1,
        closeValue: 2,
        title: '',
        type: '',
        nav: '',
        name: '',
        keyword: '',
        describes: '',
        checkBoxData: [], //多选框选择的值
        method: 'false',
        formLabelWidth: '200px',
        activeName: 'first',
        tableDataLoading: true,
        tableDataLoading4: false,
        dialogFormVisible3: false,
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        dialogFormVisible5: false,
        dialogFormVisible6: false,
        dialogFormVisible7: false,
        dialogFormVisible8: false,
        dialogFormVisible9: false,
        homeData: [],
        homeData1: [{
            title: '帮我送',
            id: 1
          },
          {
            title: '帮我取',
            id: 2
          },
        ],
        choicenData2: [],
        choicenData: [],

        url: '',
        imageUrl: '',
        imageUrl2: '',
        id: '',
        bannerData: [],
        form1: {
          // id: '',
          // url: '',
          // imageUrl: ''
        },
        formcomp: {
          id: '',
          state: '',
          title: '',
          url: '',
          imageUrl: ''
        },
        userId: '',
        search: '',
        myPhone: '',
        classifyIds: 0,
        statusId: 1,
        statuss: [{
            id: -1,
            title: '全部'
          },
          {
            id: 0,
            title: '待审核'
          },
          {
            id: 1,
            title: '上架'
          },
          {
            id: 2,
            title: '下架'
          },
          {
            id: 3,
            title: '驳回'
          }
        ],
        // 房屋信息
        phone: '', //电话
        name: '', //标题
        userIdss: '', //用户id
        titleImg: '', //封面图
        img: [], //详情图
        status: '', //状态0待审核  1上架  2下架 3驳回 (修改添加不传)
        classifyId: 4, //分类id
        area: '', //大小
        house: '', //户型
        price: '', //价格
        labels: [], //标签集合
        address: '', //地址
        latitude: '', //纬度
        longitude: '', //经度
        remark: '', //描述
        editorOption: {},
        options: regionData,
        storeAddress: [],
        storeAddre: '请选择城市',
        province: '', //省
        city: '', //市
        district: '', //区
        ids: '', //信息id

        nickName: '',
        userIds: {}, //用户列表
        bq: '', //输入的标签名
        missions: 0,
        shenheId: 0, //审核id
        contents: '', //驳回理由
        dialogVisible: false,
        radio: 1,
        multipleSelection: [],
        campus: '',
        campus1: '',
        campusName: '',
        homeData2: [{
            campusName: '全部',
            campusId: ''
          },
          {
            campusName: '文件',
            campusId: 1
          },
          {
            campusName: '餐饮',
            campusId: 2
          },
          {
            campusName: '生鲜',
            campusId: 3
          },
          {
            campusName: '蛋糕',
            campusId: 4
          },
          {
            campusName: '鲜花',
            campusId: 5
          },
          {
            campusName: '钥匙',
            campusId: 6
          },
          {
            campusName: '数码',
            campusId: 7
          },
          {
            campusName: '服装',
            campusId: 8
          },
          {
            campusName: '快递',
            campusId: 9
          },
          {
            campusName: '其他',
            campusId: 10
          },
        ],
        quillOption: quillConfig,
        statusIdd: 1,
        statesnum: [{
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '待支付'
          }, {
            value: 2,
            label: '待接单'
          }, {
            value: 3,
            label: '已接单'
          }, {
            value: 4,
            label: '已取货/购买'
          }, {
            value: 6,
            label: '已完成'
          }, {
            value: 8,
            label: '已取消'
          }, {
            value: 10,
            label: '已下架'
          }
        ],
        statesnum1: [{
          value: 0,
          label: '全部'
        }, {
          value: 2,
          label: '待接单'
        }, {
          value: 3,
          label: '已接单'
        }, {
          value: 4,
          label: '已取货'
        }, {
          value: 6,
          label: '已完成'
        }, {
          value: 8,
          label: '用户已取消'
        }, {
          value: 9,
          label: '骑手已取消'
        }, {
          value: 10,
          label: '已下架'
        }],
        // x新的
        indentType: 3,
        deliveryUserPhone: '', //收货人手机号
        indentState: 0, //任务状态
        flag: 'day',
        info: {
          stockDate: this.getNowTime(), //日期
        },
        flags: [{
          value: 'day',
          label: '按天查询'
        }, {
          value: 'month',
          label: '按月查询'
        }, {
          value: 'year',
          label: '按年查询'
        }],
        riderPhone:'',
      }
    },
    methods: {
      //处理默认选中当前日期
      getNowTime() {
        var now = new Date()
        var year = now.getFullYear() //得到年份
        var month = now.getMonth() //得到月份
        var date = now.getDate() //得到日期
        var hh = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
        var mm = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
        var ss = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
        month = month + 1
        month = month.toString().padStart(2, '0')
        date = date.toString().padStart(2, '0')
        var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`
        return defaultDate
        this.$set(this.info, 'stockDate', defaultDate)
      },
      handleAvatarSuccess3(file) {
        this.formcomp.imageUrl = file.data
      },
      handleAvatarSuccess4(file) {
        this.imageUrl = file.data
      },
      handleSizeChange(val) {
        this.size = val
        this.bannerSelect()
      },
      handleCurrentChange(val) {
        this.page = val
        this.bannerSelect()
      },
      handleSizeChange1(val) {
        this.limit = val
        this.homeSelect()
      },
      handleCurrentChange1(val) {
        this.page = val
        this.homeSelect()
      },
      handleSizeChange2(val) {
        this.limit = val
        this.homeSelect()
      },
      handleCurrentChange2(val) {
        this.page = val
        this.homeSelect()
      },
      handleClick(tab, event) {
        this.page = 1
        this.indentState = 0
        this.phone = ''
        this.riderPhone = ''
        if (tab._props.label == '同城帮买') {
          this.indentType = 3
          this.homeSelect()
        }
        if (tab._props.label == '同城服务') {
          this.type = 1
          this.indentType = 4
          this.homeSelect()
        }
        if (tab._props.label == '送取任务') {
          this.indentType = 1
          this.homeSelect()
        }
        if (tab._props.label == '外卖任务') {
          this.indentType = 5
          this.homeSelect()
        }

      },

      // 删除分类
      navdeletes(row) {
        if (row.id > 13) {
          this.$confirm(`确定删除此条信息?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl(`/activity/delete/${row.id}`),
              method: 'post',
              data: this.$http.adornData({})
            }).then(({
              data
            }) => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.homeSelect()
                }
              })
            })
          }).catch(() => {})
        } else {
          this.$message({
            message: '此条信息不可删除',
            type: 'warning',
            duration: 1500,
            onClose: () => {}
          })
        }

      },
      //轮播数据
      bannerSelect() {
        this.$http({
          url: this.$http.adornUrl('banner/selectBannerList'),
          method: 'get',
          params: this.$http.adornParams({
            'state': this.state,
            'classify': this.classify,
          })
        }).then(({
          data
        }) => {
          let returnData = data.data
          this.bannerData = returnData
        })
      },

      // 修改轮播图
      amendBanner(index, rows) {
        this.dialogFormVisible1 = true
        this.id = rows.id
        this.imageUrl = rows.imageUrl
        if (rows.url) {
          this.url = rows.url
        } else {
          this.url = ''
        }

        this.sort = rows.sort
        this.state = rows.state
        this.name = rows.name
        this.describes = rows.describes
      },

      // 删除banner图
      deletes(row) {
        let delid = row.id
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`banner/deleteBannerById?id=${delid}`),
            method: 'post',
            data: this.$http.adornData({})
          }).then(({
            data
          }) => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.bannerSelect()
              }
            })
          })
        }).catch(() => {})

      },
      // 下架弹框
      compile(index, rows) {
        // let that = this
        this.$confirm(`确定下架此任务?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          console.log('············', res)
          this.$http({
            url: this.$http.adornUrl(`admin/tbindent/adminSoldOutIndent?indentNumber=${rows.indentNumber}`),
            method: 'post',
            params: this.$http.adornData({})
          }).then(({
            data
          }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.homeSelect()
              }
            })
          })
        }).catch(() => {
          console.log('取消')
        })
      },
      // 下架弹框
      compileQx(index, rows) {
        // let that = this
        this.$confirm(`骑手已接单，确定取消此任务?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.$http({
            url: this.$http.adornUrl(`admin/tbindent/riderCancleIndent?indentNumber=${rows.indentNumber}`),
            method: 'post',
            params: this.$http.adornData({})
          }).then(({
            data
          }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.homeSelect()
              }
            })
          })
        }).catch(() => {
          console.log('取消')
        })
      },
      //添加精选商品
      choiaddNotice() {
        this.campus = ''
        this.campus1 = ''
        this.dialogFormVisible5 = true
        this.getMyLocation()
      },

      // 查询
      phoneSelect() {
        this.page = 1
        this.InformationSelect()
      },
      // 重置
      cleans2() {
        this.status = -1
        this.classify = 0
        this.myPhone = ''
        this.search = ''
        this.page = 1
        this.campus = ''
        this.campus1 = ''
        this.riderPhone = ''
        console.log('this.phone', this.myPhone)
        this.InformationSelect()
      },
      // 获取社区数据列表
      homeSelect() {
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('admin/tbindent/findAllIndents'),
          method: 'post',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'indentType': this.indentType,
            'deliveryUserPhone': this.phone,
            'indentState': this.indentState,
            'date': this.info.stockDate,
            'dateType': this.flag,
             'riderPhone':this.riderPhone
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data

          console.log(data.data.state)
          this.homeData = data.data
        })
      },
      // 信息数据
      InformationSelect() {
        this.userId = this.$store.state.user.id
        this.$http({
          url: this.$http.adornUrl(`information/selectInformationList`),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'search': this.search,
            'classify': this.classifyIds,
            'status': this.statusId,
            'phone': this.myPhone,
            'campus': this.campus1

          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          for (var i in data.data.records) {
            if (data.data.records[i].img) {
              data.data.records[i].imgs = data.data.records[i].img.split(',')
            }

          }
          let returnData = data.data
          this.choicenData = returnData


        })
      },

      // 审核
      shenhe(row) {
        this.shenheId = row.id
        this.dialogFormVisible8 = true
      },
      // 提交审核
      refuseto(row) {
        if (this.radio == 2 && this.contents == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入驳回理由',
            type: 'warning'
          })
          return
        } else {
          let ids = this.shenheId
          let status = this.radio
          let content = this.contents
          this.$http({
            url: this.$http.adornUrl(
              `information/auditInformation?ids=${ids}&status=${status}&content=${content}`),
            method: 'post',
            data: this.$http.adornData({})
          }).then(({
            data
          }) => {
            this.dialogFormVisible8 = false
            this.$message({
              message: '审核完成',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.radio = 1
                this.contents = ''
                this.InformationSelect()
              }
            })
          })
        }
      },
      // 修改信息弹框
      choiCompile(index, row) {
        console.log(index, row)

      },
      // 删除信息
      choidelete(row) {
        let delid = row.id
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`information/deleteInformationById?ids=${delid}`),
            method: 'post',
            params: this.$http.adornData({})
          }).then(({
            data
          }) => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.InformationSelect()
              }
            })
          })
        }).catch(() => {})
      },
      // 筛选信息
      animeDat2(classifyIds) {
        this.classifyIds = classifyIds
        this.homeSelect()
      },
      animeDat3(state) {
        this.InformationSelect()
      },
      // 多选
      handleSelectionChange(val) {

        var arr = []
        for (var i in val) {
          arr.push(val[i].id)
        }
        this.multipleSelection = arr;
        console.log('val', val, this.multipleSelection)
      },
      // 批量删除
      choideletes() {
        console.log(this.multipleSelection)
        let delid = this.multipleSelection.toString()
        this.$confirm(`确定删除信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`information/deleteInformationById?ids=${delid}`),
            method: 'post',
            params: this.$http.adornData({})
          }).then(({
            data
          }) => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.InformationSelect()
              }
            })
          })
        }).catch(() => {})
      },
      // 获取社区数据列表
      homeSelect1() {
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl('helpCampus/selectCampusList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'content': this.content
          })
        }).then(({
          data
        }) => {
          this.tableDataLoading = false
          let returnData = data.data;
          this.homeData2 = returnData
        })
      },
      // 分类是否启用
      change2(val, row) {
        this.$http({
          url: this.$http.adornUrl(`activity/updateActivityStatus?id=${row.id}`),
          method: 'post',
          data: this.$http.adornData({})
        }).then(({
          data
        }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.homeSelect()
            }
          })
        })
      },

      // 任务上下架
      change3(val, row) {
        this.$http({
          url: this.$http.adornUrl(`information/updateInformationStatus?id=${row.id}`),
          method: 'post',
          data: this.$http.adornData({})
        }).then(({
          data
        }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.homeSelect()
            }
          })
        })
      },
      // 详情跳转
      updatesvideo(userId) {
        this.$router.push({
          path: '/userDetail',
          query: {
            userId: userId
          }
        })
      },
      // 查询
      select() {
        this.page = 1
        this.limit = 10
        this.homeSelect()
      },
      // 重置
      cleans() {
        this.indentState = 0
        this.phone = ''
        this.riderPhone = ''
        this.flag = 'day'
        this.info.stockDate = this.getNowTime()
        this.homeSelect()
      },
      // 订单分析选择日期
      animeOrder() {
        console.log('info', this.info)
        this.homeSelect()
        // this.colonel()
      },
      // 订单分析年月日
      orderfenxi(value) {
        this.page = 1
        let vanumber = value
        // if (vanumber === 1) {
        this.flag = value
        this.homeSelect()
        // this.colonel()
        // }
        // if (vanumber === 2) {
        // 	this.flag = 2
        // 	this.taskData()
        // 	this.colonel()
        // }
        // if (vanumber === 3) {
        // 	this.flag = 3
        // 	this.taskData()
        // 	this.colonel()
        // }
      },
    },
    mounted() {
      this.homeSelect()
    }
  }
</script>

<style>
  .customWidth {
    width: 80% !important;
  }

  .adver_main.box {
    display: block;
    max-width: 100%;
    text-align: center;
    border: 1px dotted rgba(67, 79, 103, .4);
  }

  .cards {
    padding: 0 8px;
    margin-bottom: 15px;
  }

  .adver_main.box a {
    display: flex;
    justify-content: center;
    height: 150px;
    line-height: 150px;
    text-decoration: none
  }

  .bannerManin {
    border: 1px solid #e8e8e8;
    font-size: 14px;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 113px;
    color: rgba(0, 0, 0, .65);
  }

  .bannerManin span {
    display: inline-block;
    margin-left: 5px;
  }

  .bannerManin img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  .bannerbtn {
    display: flex;
    border-top: none !important;
    border: 1px solid #e8e8e8;
    padding: 11px;
    font-size: 14px;
    color: #3E8EF7;
  }

  .bannerbtn a {
    flex: 1;
    text-align: center;
    color: #3E8EF7 !important;
    text-decoration: none;
  }

  .imgs {
    position: relative;
    border-radius: 6px;
    width: 148px;
    height: 148px;
    margin-right: 10px;
    display: inline-block;
  }

  .dels {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }

  .dels .el-icon-delete {
    line-height: 148px;
    padding-left: 58px;
    font-size: 25px;
    color: #fff;
  }

  .imgs:hover .dels {
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
    opacity: 0.5;
  }

  .bqList {
    padding: 4px 14px;
    margin: 4px;
    border: 1px solid #efefef;
    font-size: 12px;
    color: #999;
    border-radius: 4px;
    margin-right: 15px;
  }

  .delss {
    display: none;
    position: relative;
  }

  .delss .el-icon-delete {
    position: absolute;
    top: 0;
  }

  .bqList:hover .delss {
    display: initial;
    opacity: 0.5;

  }

  .tj {
    padding: 6px !important;
    margin: 4px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>
